<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>爱打印-iprint 登陆注册</title>
		<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
	</head>

	<body>
		<!-- 菜单导航 -->
		<div th:insert="~{front/head :: header}"></div>
        <div id="ctxPath" th:src="@{/}"></div>
		<!--登陆注册-->
		<div class="layui-container">
			<div class="layui-row">
				<div class="layui-tab layui-tab-card" lay-filter="docDemoTabBrief">
					<ul class="layui-tab-title">
                        <li class="layui-this" th:if="${type=='login'}">登陆</li>
                        <li th:if="${type=='login'}">注册</li>
                        <li th:if="${type=='register'}">登陆</li>
                        <li class="layui-this" th:if="${type=='register'}">注册</li>
					</ul>
					<div class="layui-tab-content" style="height: 500px;">
						<!-- 登陆 -->
						<div  th:class="${type == 'login'}? 'layui-tab-item layui-show':'layui-tab-item'">
							<div class="layui-col-lg-offset4">
								<form class="layui-form layui-form-pane" style="margin-top: 55px;">
									<div class="layui-form-item">
										<label class="layui-form-label">用户名</label>
										<div class="layui-input-inline">
											<input type="text" name="name" lay-verify="required|username" placeholder="请输入" autocomplete="off" class="layui-input">
										</div>
									</div>
									<div class="layui-form-item">
										<label class="layui-form-label">密码</label>
										<div class="layui-input-inline">
											<input type="password" name="pwd" lay-verify="required|pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
										</div>
									</div>

									<div class="layui-form-item">
										<label class="layui-form-label">验证码</label>
										<div class="layui-input-inline">
											<input type="text" name="code" lay-verify="required|code" placeholder="请输入验证码" autocomplete="off" class="layui-input">
										</div>
										<div class="layui-input-inline">
											<img style="height:35px;" id="loginCode" th:src="@{/loginCode}" />
										</div>
									</div>
									<div class="layui-form-item">
										<button class="layui-btn layui-btn-fluid" style="width: 300px;" lay-submit="" lay-filter="doLogin" >
										登陆
									</button>
									</div>
									<div class="layui-form-item">
										<button class="layui-btn layui-btn-fluid" style="width: 300px;">
										取消
									</button>
									</div>
								</form>
							</div>
						</div>
						<!-- 注册 -->
						<div  th:class="${type == 'register'}?'layui-tab-item layui-show':'layui-tab-item'" >
							<div class="layui-col-lg-offset3">
								<form class="layui-form layui-form-pane" style="margin-top: 55px;margin-left: 80px;">
									<!--用户名-->
									<div class="layui-form-item">
										<label class="layui-form-label">用户名</label>
										<div class="layui-input-inline">
											<input id="inputname" type="text" name="name" lay-verify="required|username" placeholder="用户名将是您的登陆账号" autocomplete="off" class="layui-input">
										</div>
									</div>
									<!--密码-->
									<div class="layui-form-item">
										<label class="layui-form-label">密码</label>
										<div class="layui-input-inline">
											<input type="password" id="pass" name="pwd" lay-verify="required|pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
										</div>
									</div>
									<!--确认密码-->
									<div class="layui-form-item" >
										<label class="layui-form-label">确认密码</label>
										<div class="layui-input-inline">
											<input type="password" lay-verify="required|passCheck" placeholder="确认密码" autocomplete="off" class="layui-input">
										</div>
									</div>
									<!--邮箱-->
									<div class="layui-form-item">
										<label class="layui-form-label">邮箱</label>
										<div class="layui-input-inline">
											<input name="mail" lay-verify="required|mail" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
										</div>
									</div>
									<div class="layui-form-item">
										<label class="layui-form-label">验证码</label>
										<div class="layui-input-inline">
											<input type="text" name="code" lay-verify="required|code" placeholder="请输入验证码" autocomplete="off" class="layui-input">
										</div>
										<div class="layui-input-inline">
											<img style="height:35px;" id="registerCode" th:src="@{/registerCode }" />
										</div>
									</div>
									<div class="layui-form-item">
										<button class="layui-btn layui-btn-fluid" style="width: 300px;" lay-submit="" lay-filter="doRegister" id="registerBtn">
										注册
									</button>
									</div>
									<div class="layui-form-item">
										<button class="layui-btn layui-btn-fluid" style="width: 300px;" >
										取消
									</button>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>

		<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
		<!-- 登陆事件 -->
		<script>
			layui.use(['form', 'layedit', 'laydate'], function() {
				var form = layui.form,
					layer = layui.layer,
					$ = layui.$;
				var ctxPath = document.getElementById("ctxPath").getAttribute("src");
				//自定义验证规则
				form.verify({
					username: function(value) {
						if(value.length < 5) {
							return '用户名长度不能小于5个字符！';
						}
						
					},
                    pass: [/(.+){6,12}$/, '密码必须6到12位'],
					code: function(value) {
						if(value.length != 4) {
							return '验证码长度不正确！';
						}
					},
				});
				//监听提交
				form.on('submit(doLogin)', function(data) {
					$.ajax({
						cache:true,
						type:"POST",
						url: ctxPath+"doLogin",
						async: true,
						contentType:"application/json;charset=utf-8",
						data: JSON.stringify(data.field),
						success: function(data) {
							if(data == '1') {
								location.href=ctxPath+"index";
							} else if(data == '2') {
								layer.msg('用户名或密码不正确！');
								var url = ctxPath+"loginCode?" + Math.random();
								$("#loginCode").prop("src", url);
							} else {
								layer.msg('验证码不正确！');
								var url = ctxPath+"loginCode?" + Math.random();
								$("#loginCode").prop("src", url);
							}
						}
					});
					return false;
				});
				
				$("#loginCode").click(function() {
					var url = ctxPath+"loginCode?" + Math.random();
					$(this).prop("src", url);
				});

			});

			/*导航栏效果*/
			layui.use('element', function() {
				var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
				//监听导航点击
				element.on('nav(demo)', function(elem) {
					layer.msg(elem.text());
				});
			});
		</script>
		
		<!-- 注册事件 -->		
		<script>
			layui.use(['form', 'layedit', 'laydate'], function() {
				var form = layui.form,
					layer = layui.layer,
					$ = layui.$;
				//自定义验证规则
                var ctxPath = document.getElementById("ctxPath").getAttribute("src");
				form.verify({
					username: function(value) {
						if(value.length < 5) {
							return '用户名长度不能小于5个字符！';
						}
					},
					pass: [/(.+){6,12}$/, '密码必须6到12位'],
					passCheck: function(value) {
						if($("#pass").val() != value) {
							return '密码不一致！';
						}
					},
					mail: [/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/, '邮箱格式不正确'],
					code: function(value) {
						if(value.length != 4) {
							return '验证码长度不正确！';
						}
					},
				});
				//监听提交
				form.on('submit(doRegister)', function(data) {
					$.ajax({
						cache:true,
						type:"POST",
						url: ctxPath+"doRegister",
						async: true,
						contentType:"application/json;charset=utf-8",
						data: JSON.stringify(data.field),
						success: function(msg) {
							if(msg == "ok") {
								window.location.href = ctxPath+"index"
							} else if(msg == "nook"){
								layer.msg("验证码不正确！");
							}else{
								layer.msg("未知错误，请联系管理员！");
							}
						}
					});
					return false;
				});
				//单击更换验证码
				$("#registerCode").click(function() {
					var url = ctxPath+"registerCode?" + Math.random();
					$(this).prop("src", url);
				});
				
				
				
				$("#inputname").blur(function(){
					var val = $(this).val();
					if(val != null && val != '')
						$.ajax({
							cache:true,
							type:"GET",
							url: ctxPath+"verifyName?name="+val,
							async: true,
							success: function(data) {
								if(data=="1") {
									layer.tips('用户名已存在', '#inputname', {
										  tips: [2, '#ff230b']
										});
									$("#registerBtn").attr("disabled",true);
									$("#registerBtn").css("background-color","#a7a8a8");
								} else {
									layer.tips('用户名可以使用！', '#inputname', {
										  tips: [2, '#78BA32']
										});
									$("#registerBtn").attr("disabled",false);
									$("#registerBtn").css("background-color","#009688");
								}
							}
						});
				});
			});
		</script>
	</body>

</html>